<template>
  <div>
    <bfe-dialog 
        :title="type === 'add' ? $t('stm.btn.add') : type === 'edit' ? $t('stm.btn.edit') : type === 'detail' ? $t('stm.btn.detail') : $t('stm.btn.delete')" 
        :visible.sync="showFlag"
        :close-on-click-modal="false" 
        append-to-body
        @close="handCancel"
 >
    <div>
         <bfe-tabs v-model="activeTab" type="border-card">
            <!-- 基本信息页内容 -->
           <bfe-tab-pane  label="基本信息" name="basicInfo" >
              <bfe-form ref="formObj" v-loading="loading" class="container" :rules="formRules" :model="formObj" label-position="top" label-width="100px">
                <div class="row">
                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                      <bfe-form-item :label="$t('stm.suppressionConfig.acType')" prop="acType">
                        <bfe-select v-model="formObj.acType" size="small" :disabled="isDisabled" :placeholder="$t('stm.validateTip.pleaseSelect')" :maxlength="5"  >
                          <bfe-option v-for="(item, index) in selectObj['exempttype'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                        </bfe-select>
                      </bfe-form-item>
                    </div>
                    <!-- 选择豁免模型 -->
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                      <bfe-form-item :label="$t('stm.suppressionConfig.selectModels')" prop="selectModels">
                        <bfe-checkbox v-model="formObj.selectModels" size="small" :disabled="detailDelDisabled" @change="handleSelectModelsChange"  />
                      </bfe-form-item>
                    </div>
                    <!-- 狀態 -->
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                      <bfe-form-item :label="$t('stm.suppressionConfig.status')" prop="status">
                        <bfe-select  v-model="formObj.status" size="small" :disabled="detailDelDisabled" :placeholder="$t('stm.validateTip.pleaseSelect')" >
                          <bfe-option v-for="(item, index) in selectObj['exemptstatus'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                        </bfe-select>
                      </bfe-form-item>
                    </div>
                                </div>
                                <div class="row">
                                        <!-- 賬戶編號 -->
                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.acctNo')" prop="acctNo">
                    <!-- // 禁用修改为对应的客户号的值 -->
                    <bfe-input v-model="formObj.acctNo" type="input" :placeholder="$t('stm.validateTip.pleaseSelect')" :disabled="true" style="width:calc(100% - 46px)" />
                    <bfe-button style="padding: 8px 10px; float:right; margin-top: 3px;" type="primary"  icon="search"  size="small" :disabled="String(formObj.acType) === '0' || isDisabled"  @click="isAccShow = true" />
                  </bfe-form-item>
                </div>
                <!-- 客戶編號 -->
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.cstId')" prop="cstId">
                    <!-- // 禁用修改为对应的账户号的值 -->
                    <bfe-input v-model="formObj.cstId"  type="input"  :placeholder="$t('stm.validateTip.pleaseSelect')" :disabled="true"  style="width:calc(100% - 46px)" />
                    <bfe-button  style="padding: 8px 10px; float:right; margin-top: 3px;" type="primary"  icon="search" size="small" :disabled="String(formObj.acType) === '1' || isDisabled"  @click="isShow = true" />
                  </bfe-form-item>
                </div>
                <!-- 客戶姓名 -->
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.cstName')" prop="cstName">
                    <bfe-input v-model="formObj.cstName" type="input"  :maxlength="150"  :disabled="true"  :placeholder="$t('stm.validateTip.pleaseInput')"  size="small" />
                  </bfe-form-item>
                </div>
                                </div>
                                <div class="row">
                                    <!-- 編輯人 -->
                                                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.editorPerson')" prop="editorPerson">
                    <bfe-input v-model="formObj.editorPerson" type="input" :maxlength="150" :disabled="true"  :placeholder="$t('stm.validateTip.pleaseInput')"  size="small"  />
                  </bfe-form-item>
                </div>
                <!-- 編輯時間 -->
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.editorTime')" prop="editorTime">
                    <bfe-input  v-model="formObj.editorTime" type="input" :maxlength="150"  :disabled="true" :placeholder="$t('stm.validateTip.pleaseInput')"  size="small"  />
                  </bfe-form-item>
                </div>
                <!-- DC編輯人 -->
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.auditorDC')" prop="auditorDC">
                    <bfe-input v-model="formObj.auditorDC" type="input" :maxlength="150"  :disabled="true"  :placeholder="$t('stm.validateTip.pleaseInput')" size="small" />
                  </bfe-form-item>
                </div>
                </div>
                <div class="row">
                    <!-- DC編輯時間 -->
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <bfe-form-item :label="$t('stm.suppressionConfig.auditorDCTime')" prop="auditorDCTime">
                    <bfe-input  v-model="formObj.auditorDCTime"  type="input" :maxlength="150"  :disabled="true" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" />
                  </bfe-form-item>
                </div>
                <!-- 監控開始日 -->
                <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                  <bfe-form-item :label="$t('stm.suppressionConfig.abateTimeStartno')" prop="effectTime" required>
                    <bfe-date-picker  v-model="formObj.effectTime" type="date" size="small" :picker-options="pickerOptions"  :editable="true" :disabled="detailDelDisabled"  :placeholder="$t('stm.validateTip.pleaseSelect')"  format ></bfe-date-picker>
                  </bfe-form-item>
                </div>
                <!-- 監控結束日 -->
                <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                  <bfe-form-item :label="$t('stm.suppressionConfig.abateTimeEndno')" prop="abateTime" required>
                    <bfe-date-picker v-model="formObj.abateTime" type="date" size="small" :picker-options="endpickerOptions" :editable="true" :disabled="detailDelDisabled"  :placeholder="$t('stm.validateTip.pleaseSelect')"  format></bfe-date-picker>
                  </bfe-form-item>
                </div>
                                </div>
                                <div class="row">
                                    <!-- 备注 -->
                                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <bfe-form-item :label="$t('stm.suppressionConfig.remark')" prop="remark" required>
                    <bfe-input v-model="formObj.remark" type="textarea" :disabled="detailDelDisabled"  :placeholder="$t('stm.validateTip.pleaseInput')" size="small" />
                  </bfe-form-item>
                </div>
                                </div>
<!-- 豁免類型 -->
                
                
                
                
                
              </bfe-form>
           </bfe-tab-pane>
              <!-- 模型标签页内容 -->
           <bfe-tab-pane v-if="showModelTab" label ="模型" name="model">
                <Model ref="modeList" :bank-id-obj="bankIdObj" :check-list="checkMdlList" :type="type"  /> <!-- 使用 Model 组件 -->
           </bfe-tab-pane>
         </bfe-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
        <!-- 查看的时候如果没有模型是没有按钮的  有模型需要上一页下一页 -->
        <!-- 删除的话，有模型是【下一页】，【上一页】【确定】  没有模型就是一个【确定】-->
        <!-- 上一步  新增编辑 在模型页面出现， 或者查看的时候有选择模型也会有--> 
        <bfe-button v-if="activeTab === 'model' && (isAddOrEdit || (detailDelDisabled && showModelTab)) " @click="handLast">上一步</bfe-button>
        <!-- 确认 确认框  删除有  或者 基础信息页面没选中豁免类型 或者 模型页面 -->
        <bfe-button
          v-if="shouldShowConfirmButton"
          type="primary"
          :loading="loading"
          @click="handConfirm"
        >{{ $t('stm.btn.confirm') }}</bfe-button>
        <!-- 下一步  新增或者编辑 并且在基础新页面 并且选中豁免模型 -->
        <bfe-button v-if="activeTab !== 'model' && showModelTab &&  (isAddOrEdit ||  (detailDelDisabled && showModelTab))" @click="handNext">下一步</bfe-button>
    </span>
    </bfe-dialog>
   <!-- 账户号 -->
    <bfe-dialog
          :title="language === 'zh_TW' ? '賬戶資訊查詢' : 'AIF Inquiry'"
          :visible.sync="isAccShow"
          @close="isAccShow = false"
          append-to-body
          :close-on-click-modal="false"
          width="1150px"
        >
          <AIFInquiry ref="AIFInquiry"/>
          <span slot="footer" class="dialog-footer">
            <bfe-button type="primary" @click="setAcctNoInfo">{{ $t('stm.btn.save') }}</bfe-button>
            <bfe-button type="primary" @click="isAccShow = false">{{ $t('stm.btn.cancel') }}</bfe-button>
          </span>
    </bfe-dialog>
<!-- 客戶號 -->
    <bfe-dialog
        :title="language === 'zh_TW' ? '客戶資訊查詢' : 'CIF Inquiry'"
        :visible.sync="isShow"
        @close="isShow = false"
        append-to-body
        :close-on-click-modal="false"
        width="1150px"
        >
          <CustomList ref="CustomList"/>
          <span slot="footer" class="dialog-footer">
            <bfe-button type="primary" @click="saveCustomer">{{ $t('stm.btn.save') }}</bfe-button>
            <bfe-button type="primary" @click="isShow = false">{{ $t('stm.btn.cancel') }}</bfe-button>
          </span>
    </bfe-dialog>
  </div>
</template>

<script>
import Model from './Model';
import {mapState} from 'vuex'
import mixinList from '@stm/mixins'
import moment from 'moment'
import AIFInquiry from '@/views/business-o/stm/views/commonInquiry/AIFInquiry/List.vue';
import CustomList from '@/views/business-o/stm/views/commonInquiry/CIFInquiry/List.vue';

export default {
  components: {
    Model,
    AIFInquiry,
    CustomList,
  },  
  mixins: [mixinList],
  props: {
    selectObj:{
      type: Object,
      default: () => {} 
    },
    bankIdObj: {
          type: Object,
           default: () => ({
                zh_TW: [], // 中文繁体语言的数据
                en_US: []  // 英文语言的数据
            })
    }
  },
  data() {
    return {
      showFlag: false,
      formRules: {
        remark: [{ required: true, message: this.$t('stm.validateTip.pleaseSelect'), trigger: "change" }], // 客户号
        acctNo: [], // 账户编号
        cstId: [{ required: true, message: this.$t('stm.validateTip.pleaseSelect'), trigger: "change" }], // 客户号
      },
      formObj: {
        acType: '0',
        selectModels: false,
        status: '1',
        effectTime: null,
        abateTime: null,
        acctNo: null,
        cstId: null,
        cstName: null,
        editorPerson: null,
        editorTime: null,
        auditorDC: null,
        auditorDCTime: null,
        remark: null,
        bankNo: null,
      },
      type: '',
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      btnDirection: 'down',
      buttonName: {
        up: 'stm.roleMaintenance.up',
        down: 'stm.roleMaintenance.down'
      },
      activeTab: 'basicInfo', // 默认激活的标签页
      showModelTab: false, // 是否显示模型标签页
      pageData: {}, // 选中的数据
      isShow: false,
      isAccShow: false,
      checkMdlList: [],
      pickerOptions: {
        disabledDate: this.disabledDate // 禁用日期函数
      },
      endpickerOptions: {
        disabledDate: this.disabledEndDate // 禁用日期函数
      },
    }
  },
      computed: {
        ...mapState({
          language: (state) => state.base.language
        }),
        isAddOrEdit() {
            return this.type == 'add' || this.type == 'edit'
        },
        detailDelDisabled() {
            return this.type == 'detail' || this.type == 'delete'
        },
        isDisabled() {
            return this.type == 'detail' || this.type == 'delete' || this.type == 'edit'
        }
        shouldShowConfirmButton() {
					// 删除逻辑：根据是否选中了复选框，判断 tab 页面
					if (this.type === 'delete') {
						if (this.showModelTab) {
							return this.activeTab === 'model'; // 模型tab选中：只在模型页显示
						} else {
							return this.activeTab === 'basicInfo'; // 没选中：只在基础信息页显示
						}
					}
					// 非删除、非详情逻辑
					if (this.type !== 'detail') {
						if (this.activeTab === 'basicInfo') {
							return !this.showModelTab; // 基础信息页 + 没选中复选框才显示
						} else if (this.activeTab === 'model') {
							return true; // 模型页始终显示
						}
					}
      		return false;
    		}
      },
    watch: {
        'formObj.acType'(newValue) {
            // 清空 如果是账户
            if(String(newValue) === "1") {
                this.$set(this.formObj, 'cstId', null);
                this.$set(this.formObj, 'cstName', null);
            } else {
                this.$set(this.formObj, 'acctNo', null);
            }
            const acctNoRule = String(newValue) === "1" ? [{ required: true, message: this.$t('stm.validateTip.pleaseSelect'), trigger: "change" }, { validator: this.validateAcctNo, trigger: "change" }] : [];
            const cstIdRule = String(newValue) === "0" ? [{ required: true, message: this.$t('stm.validateTip.pleaseSelect'), trigger: "change" }, { validator: this.validateCstId, trigger: "change" } ] : [];

            this.$set(this.formRules, 'acctNo', acctNoRule);
            this.$set(this.formRules, 'cstId', cstIdRule);

            // 清除之前的校验结果
            this.$refs.formObj.clearValidate();
        },
    },
  methods: {
    initPage(type, row){
         this.type = type;//Add
         this.showFlag = true;
         if(type !== 'add'){
            this.pageData = {
              ...row
            }
            this.getPageData()
          } 
        // 新增编辑  编辑人使用接口
        if(type === 'add' || type === 'edit') {
            const params = {
              optCode: 'STM002GET8405',
              payload: {
                bankNo: null,
                custNo: null,
                monitorType: null,
                flag: 'add'
              }
            }
            this.$p2svr(this.$api['_01_STM002MAIN8400'], '', params).then(res => {
                this.formObj.editorPerson = res.payload.editor || this.userInfo.ehrNo;
                this.formObj.editorTime = moment(res.payload.editorTime).format('YYYY-MM-DD HH:mm:ss');
            })
        }
    },
    // 定义禁用日期的逻辑
    disabledDate(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0); // 将今天的小时、分钟、秒和毫秒清零
      return date < today; // 禁用所有早于今天的日期
    },
    disabledEndDate(date) {
      if (!this.formObj.effectTime) {
              const today = new Date();
              today.setHours(0, 0, 0, 0); // 将今天的小时、分钟、秒和毫秒清零
              return date < today; // 禁用所有早于今天的日期
      }
      const startDate = new Date(this.formObj.effectTime);
      startDate.setHours(0, 0, 0, 0); // 清除时间部分
      return date < startDate; // 禁用所有早于开始时间的日期
    },
    handCancel(){
      this.expanded = false
      this.btnDirection = 'down'
      this.formObj = {
        acType: '0',
        selectModels: false,
        status: '1',
        effectTime: null,
        abateTime: null,
        acctNo: null,
        cstId: null,
        cstName: null,
        editorPerson: null,
        editorTime: null,
        auditorDC: null,
        auditorDCTime: null,
        remark: null,
         bankNo: null,
      }
      this.checkMdlList = []
      this.pageData = {}
      this.$refs.formObj.resetFields()
      this.showFlag = false
      this.activeTab = 'basicInfo' // 重置标签页
      this.showModelTab = false // 隐藏模型标签页
    },
    handConfirm(){
    // 优先判断是否删除
        if(this.type === 'delete') {
              this.loading = true    
              this.$messageBox.confirm(this.$t('stm.handleTips.confirmDel'), this.$t('stm.handleTips.tip'), {
                confirmButtonText: this.$t('stm.handleTips.yes'),
                cancelButtonText: this.$t('stm.handleTips.no'),
                type: 'warning',
                closeOnClickModal: false
              }).then(() => {
                    const params = {
                      optCode: 'STM002DEL1201',
                      payload: {
                        ...this.pageData
                      }
                    }
                    this.$p2svr(this.$api['_01_STM002SUPPRESS1200'] , 'RequestPoAuth', params).then(res => {
                      if(res.optMsgInfo && res.optMsgInfo.optStatus === 'success'){
                        console.log('删除了');
                        this.handCancel()
                      this.$emit('doSearch')
                      }
                    }).finally(() => {
                      this.loading = false
                    })
              }).catch(() => {
                  this.loading = false
              })
        } else {
            if(!this.formObj.effectTime) {
                this.$message.warning('请选择監控開始日')
                return 
            }
            if(!this.formObj.abateTime) {
                this.$message.warning('请选择監控结束日')
                return
            }
      // 判断开始是否比结束晚
            if (moment(this.formObj.effectTime).valueOf() > moment(this.formObj.abateTime).valueOf()) {
                this.$message.warning('请选择監控结束日')
                return
        } 
            this.$refs.formObj.validate(ok => {
                if(ok){   
                    this.loading = true
                    let moList = []
                    if (this.$refs.modeList && this.$refs.modeList?.bottomList) {
                        moList = this.$refs.modeList.bottomList?.map(item => item.mdlId)
                    }    
                      const params = {
                        optCode: this.type === 'add' ? 'STM002ADD1201' : 'STM002MOD1201',
                        payload: {
                            ...this.formObj,
                            editorTime: moment(this.formObj.editorTime).format('YYYY-MM-DD HH:mm:ss'),
                            auditorDCTime: moment(this.formObj.auditorDCTime).format('YYYYMMDD HHmmss'),
                            effectTime: moment(this.formObj.effectTime).format('YYYYMMDD'),
                            abateTime: moment(this.formObj.abateTime).format('YYYYMMDD'),
                            mdlIdList: [...moList]
                        }
                      }
                  this.$p2svr(this.$api['_01_STM002SUPPRESS1200'] , 'RequestPoAuth', params).then(res => {
                    if(res.optMsgInfo && res.optMsgInfo.optStatus === 'success'){
                      this.handCancel()
                      this.$emit('doSearch')
                    }
                  }).finally(() => {
                    this.loading = false
                  })
                } else {
                    this.loading = false  
                    if(this.activeTab === 'model') {
                        this.$message.error('有必填项未填写')
                    }
                }
          })   
        }
     
    },
    handNext() {
        this.activeTab = 'model'
    },
    handLast() {
        this.activeTab = 'basicInfo'
    },
    // 点击账户号搜索
    setAcctNoInfo(row){     
         const list = this.$refs.AIFInquiry.$refs['0001.A129.0009'].getSelectedRows();
          if(list && list.length === 1) {
            this.formObj.bankNo = list[0]?.bankId || null
            this.$set(this.formObj, 'acctNo', String(list[0].acctNo));
            this.isAccShow = false;
          }
    },   
    // 点击客户号搜索
    saveCustomer() {
      const list = this.$refs.CustomList.$refs['0001.A129.0008'].getSelectedRows();
      if(list && list.length === 1) {
        this.formObj.bankNo = list[0]?.bankId || null
        this.$set(this.formObj, 'cstId', list[0].custId);
        this.$set(this.formObj, 'cstName', list[0].custName);
        this.isShow = false;

      }
    },
    handleSelectModelsChange(value) {
     console.log('handleSelectModelsChange被调用');
     console.log('value:', value);
     console.log('type:', this.type);
     console.log('value 的类型:', typeof value);

     // 检查 selectModels 是否为 true，且类型不是 'detail'
     this.showModelTab = this.formObj.selectModels;
     console.log('showModelTab:', this.showModelTab);
    },
    // 查询检索详情
    getPageData(){
      const {bankId, acctNo, cstId} = this.pageData
      const params = {
        optCode: 'STM002GET1202',
        payload: {
          bankId,
          cstId,
          acctNo
        }
      }
      this.$p2svr(this.$api['_01_STM002SUPPRESS1200'] , 'RequestPoAuth', params).then(res => {
           const {editorTime, auditorDCTime, effectTime, abateTime, editorPerson, ...rest } = res.payload.suppress
            this.showModelTab = res.payload.mdlList && res.payload.mdlList.length > 0
            this.checkMdlList = res.payload.mdlList || []
            if(this.type === 'detail' || this.type === 'delete') {
                  this.formObj = {
                        ...res.payload.suppress,
                        editorTime: editorTime ? moment(editorTime).format('YYYY-MM-DD HH:mm:ss') : null,
                        auditorDCTime: auditorDCTime ? moment(auditorDCTime).format('YYYY-MM-DD HH:mm:ss') : null,
                        effectTime: effectTime ? moment(effectTime).format('YYYY-MM-DD') : null,
                        abateTime: abateTime ? moment(abateTime).format('YYYY-MM-DD') : null,
                        selectModels: res.payload.mdlList && res.payload.mdlList.length > 0
                    } || {}
            } else {
                    this.formObj = {
                        ...this.formObj,
                        ...rest,
                        auditorDCTime: auditorDCTime ? moment(auditorDCTime).format('YYYY-MM-DD HH:mm:ss') : null,
                        effectTime: effectTime ? moment(effectTime).format('YYYY-MM-DD') : null,
                        abateTime: abateTime ? moment(abateTime).format('YYYY-MM-DD') : null,
                        selectModels: res.payload.mdlList && res.payload.mdlList.length > 0
                    } || {}
            }
          }).finally(() => {
            this.loading = false
          })
    },
    validateAcctNo(rule, value, callback) {
         if (!value) {
            return callback(new Error(this.$t('stm.validateTip.pleaseSelect')));
        }
        // 查看编辑不校验
        if(this.isDisabled) {
            return callback();
        }
        const params = {
            optCode: 'STM002GET1206',
            payload: {
              acctNo: value
            }
        }
        this.$p2svr(this.$api['_01_STM002SUPPRESS1200'] , 'RequestPoAuth', params).then(res => {
            if(String(res.payload.result) === '1') {
                return callback(new Error('账户号已存在'))
            }else {
                callback();
            }
         })
    },
    validateCstId(rule, value, callback) {
         if (!value) {
            return callback(new Error(this.$t('stm.validateTip.pleaseSelect')));
        }
        // 查看编辑不校验
        if(this.isDisabled) {
            return callback();
        }
        const params = {
            optCode: 'STM002GET1206',
            payload: {
              cstId: value
            }
        }
        this.$p2svr(this.$api['_01_STM002SUPPRESS1200'] , 'RequestPoAuth', params).then(res => {
            if(String(res.payload.result) === '1') {
                return callback(new Error('客户号已存在'))
            }else {
                callback();
            }
         })
    }
  },
}
</script>

<style lang="less" scoped>
/deep/.giop-dialog--small{
    width: 50% !important;
    margin-left: -25% !important;
    max-height: 70vh;
}
/deep/.giop-dialog__body {
    max-height: calc(70vh - 99px);
}
.handBtn{
width: 100%;
float: left;
text-align: right;
margin-top: -34px;
}
</style>